import React from 'react';
import { Card, Typography, Space, Divider, Row, Col } from 'antd';
import {
    FunctionOutlined,
    AimOutlined,
    ExperimentOutlined,
    CheckCircleOutlined
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styles from './index.module.css';

const { Title, Paragraph, Text } = Typography;

const TFIDFIntroduction: React.FC = () => {
    // 生成词频示例图表
    const getTFChartOption = () => ({
        title: {
            text: 'TF (词频) 示例'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['文档1', '文档2']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['词1', '词2', '词3', '词4', '词5'],
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            name: '词频'
        },
        series: [
            {
                name: '文档1',
                type: 'bar',
                data: [0.3, 0.2, 0.15, 0.25, 0.1],
                label: {
                    show: true,
                    position: 'top'
                }
            },
            {
                name: '文档2',
                type: 'bar',
                data: [0.2, 0.3, 0.1, 0.15, 0.25],
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    });

    // 生成IDF示例图表
    const getIDFChartOption = () => ({
        title: {
            text: 'IDF (逆文档频率) 示例'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['词1', '词2', '词3', '词4', '词5'],
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            name: 'IDF值'
        },
        series: [
            {
                type: 'line',
                data: [1.5, 2.3, 1.8, 2.0, 2.5],
                label: {
                    show: true,
                    position: 'top'
                },
                itemStyle: {
                    color: '#1890ff'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(24,144,255,0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(24,144,255,0.1)'
                            }
                        ]
                    }
                }
            }
        ]
    });

    return (
        <div className={styles.container}>
            <Card className={styles.mainCard}>
                <Typography>
                    <Title level={2}>
                        <FunctionOutlined /> TF-IDF 相似度算法说明
                    </Title>

                    <Divider />

                    <section className={styles.section}>
                        <Title level={3}>
                            <AimOutlined /> 算法原理
                        </Title>
                        <Paragraph>
                            TF-IDF（词频-逆文档频率）是一种用于信息检索与文本挖掘的加权技术。它的主要思想是：如果某个词在一篇文档中出现的频率高，
                            并且在其他文档中很少出现，那么这个词就具有很好的类别区分能力，适合用来把这篇文档和其他文档区分开来。
                        </Paragraph>

                        <Row gutter={24} className={styles.formulaSection}>
                            <Col span={12}>
                                <Card className={styles.formulaCard}>
                                    <Title level={4}>计算公式</Title>
                                    <div className={styles.formula}>
                                        <Text code>
                                            TF-IDF = TF × IDF
                                        </Text>
                                    </div>
                                    <Paragraph>
                                        其中：
                                        <ul>
                                            <li>TF(词频) = 某个词在文档中出现的次数 / 文档的总词数</li>
                                            <li>IDF(逆文档频率) = log(文档总数 / (包含该词的文档数 + 1))</li>
                                            <li>两个文档的相似度通过计算其TF-IDF向量的余弦相似度得到</li>
                                        </ul>
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.visualizationCard}>
                                    <ReactECharts option={getTFChartOption()} style={{ height: '300px' }} />
                                </Card>
                            </Col>
                        </Row>

                        <Row gutter={24} style={{ marginTop: '24px' }}>
                            <Col span={24}>
                                <Card className={styles.visualizationCard}>
                                    <ReactECharts option={getIDFChartOption()} style={{ height: '300px' }} />
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <ExperimentOutlined /> 应用场景
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>文本检索</Title>
                                    <Paragraph>
                                        在搜索引擎中对文档进行相关性排序，
                                        帮助用户快速找到最相关的文档。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>文本分类</Title>
                                    <Paragraph>
                                        提取文档的特征向量，用于文本分类和
                                        主题建模等任务。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>关键词提取</Title>
                                    <Paragraph>
                                        识别和提取文档中的重要关键词，
                                        用于文档摘要和标签生成。
                                    </Paragraph>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <CheckCircleOutlined /> 算法优势
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>考虑词频和重要性双重因素</li>
                                        <li>能有效过滤常见词的影响</li>
                                        <li>计算结果直观易解释</li>
                                        <li>适用于大规模文档集</li>
                                    </ul>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>支持增量更新</li>
                                        <li>可并行化计算</li>
                                        <li>与余弦相似度结合效果好</li>
                                        <li>广泛应用于实际系统</li>
                                    </ul>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <CheckCircleOutlined /> 实现步骤
                        </Title>
                        <Card className={styles.implementationCard}>
                            <Title level={4}>基本流程</Title>
                            <ol className={styles.stepsList}>
                                <li>
                                    <Text strong>文档预处理：</Text>
                                    <Paragraph>
                                        对文档进行分词、去停用词等预处理操作。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>计算TF：</Text>
                                    <Paragraph>
                                        统计每个词在文档中的词频。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>计算IDF：</Text>
                                    <Paragraph>
                                        计算每个词的逆文档频率。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>生成向量：</Text>
                                    <Paragraph>
                                        计算每个词的TF-IDF值，生成文档向量。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>计算相似度：</Text>
                                    <Paragraph>
                                        使用余弦相似度计算文档间的相似程度。
                                    </Paragraph>
                                </li>
                            </ol>
                        </Card>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>使用注意事项</Title>
                        <Card className={styles.noticeCard}>
                            <ul className={styles.noticeList}>
                                <li>需要合理的文本预处理策略</li>
                                <li>对文档长度差异敏感</li>
                                <li>需要定期更新IDF值</li>
                                <li>计算复杂度随词表大小增加</li>
                                <li>不考虑词序和语义信息</li>
                            </ul>
                        </Card>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>更新信息</Title>
                        <Card className={styles.updateCard}>
                            <Paragraph>
                                <Text strong>最后更新时间：</Text> 2025-03-28 14:59:54 UTC
                            </Paragraph>
                            <Paragraph>
                                <Text strong>文档维护者：</Text> lijiajunjxstnu
                            </Paragraph>
                        </Card>
                    </section>
                </Typography>
            </Card>
        </div>
    );
};

export default TFIDFIntroduction;
